<template>
	<!-- 活动信息 -->
	<view class="u-flex u-margin-bottom-16 flex-wrap u-margin-top-12" v-if="goodsInfo">
		<view class="activity-box u-font-20 u-margin-right-10 u-margin-bottom-10"
			:style="{color: AppSkin.primary, borderColor: AppSkin.primary}" v-if="goodsInfo.limit">
			{{goodsInfo.limit}}
		</view>
		<view class="activity-box u-font-20 u-margin-right-10 u-margin-bottom-10"
			:style="{color: AppSkin.primary, borderColor: AppSkin.primary}" v-if="goodsInfo.discount">
			{{goodsInfo.discount}}
		</view>
		<view class="activity-box u-font-20 u-margin-right-10 u-margin-bottom-10"
			:style="{color: AppSkin.primary, borderColor: AppSkin.primary}" v-if="goodsInfo.deduction">
			{{goodsInfo.deduction}}
		</view>
		<view class="activity-box u-font-20 u-margin-right-10 u-margin-bottom-10"
			:style="{color: AppSkin.primary, borderColor: AppSkin.primary}" v-if="goodsInfo.flashSale">
			{{goodsInfo.flashSale}}
		</view>
		<view class="activity-box u-font-20 u-margin-right-10 u-margin-bottom-10"
			:style="{color: AppSkin.primary, borderColor: AppSkin.primary}" v-if="goodsInfo.coupon">
			{{goodsInfo.coupon.name}}
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<block class="" v-if="goodsInfo.give">
			<view class="activity-box u-font-20 u-margin-right-10 u-margin-bottom-10"
				:style="{color: AppSkin.primary, borderColor: AppSkin.primary}" v-for="(item, index) in goodsInfo.give"
				:key="index">
				{{item.name}}
			</view>
		</block>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<template class="" v-if="goodsInfo.give">
			<view class="activity-box u-font-20 u-margin-right-10 u-margin-bottom-10"
				:style="{color: AppSkin.primary, borderColor: AppSkin.primary}" v-for="(item, index) in goodsInfo.give"
				:key="index">
				{{item.name}}
			</view>
		</template>
		<!-- #endif -->

	</view>
</template>

<script>
	export default {
		props: {
			info: Object
		},
		data() {
			return {
				goodsInfo: null
			}
		},
		watch: {
			info: {
				handler(val) {
					if (val.activity) {
						
						this.goodsInfo = JSON.parse(JSON.stringify(val.activity))

						if (this.goodsInfo.coupon) this.goodsInfo.coupon = JSON.parse(this.goodsInfo.coupon)
						if (this.goodsInfo.give) this.goodsInfo.give = JSON.parse(this.goodsInfo.give)
					}
				},
				deep: true,
				immediate: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.activity-box {
		border-radius: 6rpx;
		border: 1rpx solid #F5222D;
		padding: 2rpx 10rpx 4rpx;
	}
</style>
